<template>
	<view class="container">
		<div class="topCard">
			<div class="zhanshi_header">
				<div class="left_touxiang" style="border: 1px solid #00BCD4;">
					<image src="/static/userImg/user.png"></image>
				</div>
				<div class="zaiyiqi_message">
					<div class="xintiao">
						<image src="/static/icons/情人节快乐 (1).png" style="width:100%;height:100%"></image>
					</div>
					<div class="zaiyiqi_text" style="">
						<text style="color: #fff;">在一起</text>
						<text style="font-size: 50rpx;">38</text>
						<text>天</text>
					</div>
				</div>
				<div class="right_touxiang" style="border: 1px solid red;">
					<image src="/static/userImg/auditor.png"></image>
				</div>
			</div>
			<div class="missButton" hover-class="missButton_hover" >
				<image src="/static/icons/爱心.png" style="width:100%;height:100%"></image>
				<text>想他</text>
				<!-- <text>想她</text> -->
			</div>
			
			<!-- 小功能 -->
			<div class="missMessage">
				<image src="/static/icons/ic_Anniversary (1).png" style="width:100%;height:100%"></image>
			</div>


		</div>

		<div class="bottom_menus">
			<uni-row class="demo-uni-row" :width="nvueWidth" gutter="10">
				<uni-col :span="6" v-for="item in menuList" :key="item.id">
					<div class="menuItem" :style="{'color':item.color,'backgroundColor':item.backGroundColor}">
						<text style="font-size: 30rpx;font-weight: 500">{{item.title}}</text>
						<image :src="item.image" style="width:60rpx;height:60rpx;position: absolute;bottom: 0%;right: 0%;"></image>
					</div>
				</uni-col>
			</uni-row>


		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let menuList = ref([{
			id: 1,
			title: '纪念日',
			color: '#fff',
			backGroundColor: '#2196f3ad',
			image:'/static/icons/186.png'
		},
		{
			id: 2,
			title: '心情日记',
			color: '#fff',
			backGroundColor: '#673ab7ba',
			image:'/static/icons/日记.png'
		}, {
			id: 3,
			title: '恋爱相册',
			color: '#fff',
			backGroundColor: '#00bcd4b0',
			image:'/static/icons/相册.png'
		}, {
			id: 4,
			title: '姨妈记录',
			color: '#fff',
			backGroundColor: '#ffa9d2',
			image:'/static/icons/月经.png'
		},
	])
</script>

<style lang="scss">
	
	@keyframes shadowChange {
	  0% { box-shadow: inset 0px 0px 5px 5px #d974b74d; }
	  50% { box-shadow: inset 0px 0px 10px 10px #d974b74d; }
	  100% { box-shadow: inset 0px 0px 20px 20px #d974b74d; }
	}
	
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.topCard {
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			.zhanshi_header {
				width: 100%;
				height: 130rpx;
				border-radius: 130rpx;
				background-color: #d974b74d;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.left_touxiang,
				.right_touxiang {
					box-sizing: border-box;
					width: 130rpx;
					height: 130rpx;
					border-radius: 130rpx;
					background-color: #fff;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.zaiyiqi_message {
					.xintiao {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						left: 53%;
						transform: translateX(-50%);
						top: 1rpx;
						
					}

					.zaiyiqi_text {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						color: #fff;
						font-size: 30rpx;
					}
				}
			}

			.missButton {
				width: 400rpx;
				height: 400rpx;
				margin-top: 100rpx;
				position: relative;
				border-radius: 400rpx;
				

				text {
					position: absolute;
					left: 50%;
					top: 47%;
					transform: translate(-50%, -50%);
					font-size: 60rpx;
					color: #fff;
				}
			}
			.missButton_hover {
				animation: shadowChange 0.4s infinite;
			}
			
			.missMessage {
				    position: absolute;
				    right: 10rpx;
				    bottom: 30%;
				    width: 70rpx;
				    height: 70rpx;
				    padding: 10rpx;
				    border-radius: 100rpx;
				    background-color: #33333352;
			}
		}

		.bottom_menus {
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 50rpx;
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding: 40rpx 20rpx;
			.menuItem {
				position: relative;
				box-sizing: border-box;
				width: 100%;
				height: 150rpx;
				border-radius: 30rpx;
				margin: 0 5rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>